<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基本" name="base">
          <el-form-item label="排序" :label-width="formLabelWidth" prop="displayOrder">
            <el-input-number
                :min="0"
                v-model="form.displayOrder"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="优惠券名称" :label-width="formLabelWidth" prop="couponName">
            <el-input
                v-model="form.couponName"
                autocomplete="off"
                placeholder="请输入优惠券名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="消费满多少可用" :label-width="formLabelWidth" prop="enough">
            <el-input-number
                :min="0"
                v-model="form.enough"
            ></el-input-number>
            (0 不限制)
          </el-form-item>
          <el-form-item label="使用时间限制" :label-width="formLabelWidth" prop="timeLimit">
            <fortress-radio-group
                v-model="form.timeLimit"
                :dictList="CouponTimeLimitType_ordersList"
            >
            </fortress-radio-group>
          </el-form-item>

          <el-form-item label="获得后可使用" :label-width="formLabelWidth" prop="timeDays">
            <el-input-number
                ::min="0"
                v-model="form.timeDays"
            ></el-input-number>
            天 (0 不限时间)
          </el-form-item>
          <el-form-item label="开始时间" :label-width="formLabelWidth" prop="timeStart">
            <el-date-picker
                v-model="form.timeStart"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" :label-width="formLabelWidth" prop="timeEnd">
            <el-date-picker
                v-model="form.timeEnd"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="返利方式" :label-width="formLabelWidth" prop="backType">
            <fortress-radio-group
                v-model="form.backType"
                :dictList="CouponBackType_ordersList"
            >
            </fortress-radio-group>
          </el-form-item>

          <el-form-item label="立减" :label-width="formLabelWidth" prop="deduct">
            <el-input
                v-model="form.deduct"
                autocomplete="off"
                placeholder="请输入立减"
            ></el-input>
          </el-form-item>
          <el-form-item label="折扣" :label-width="formLabelWidth" prop="discount">
            <el-input
                v-model="form.discount"
                autocomplete="off"
                placeholder="请输入折扣"
            ></el-input>
          </el-form-item>


          <el-form-item label="总发放数量" :label-width="formLabelWidth" prop="total">
            <el-input-number
                v-model="form.total"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
            <fortress-radio-group
                v-model="form.status"
                :dictList="YesNoList"
            >
            </fortress-radio-group>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="领取设置" name="receive">
<!--          <el-form-item label="领取卡券链接" :label-width="formLabelWidth" prop="getUrl">-->
<!--            <el-input-->
<!--                v-model="form.getUrl"-->
<!--                autocomplete="off"-->
<!--                placeholder="请输入领取卡券链接"-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="领取中心显示" :label-width="formLabelWidth" prop="getType">
            <fortress-radio-group
                v-model="form.getType"
                :dictList="YesNoList"
            >
            </fortress-radio-group>
          </el-form-item>
          <el-form-item label="是否限制会员级别 " :label-width="formLabelWidth" prop="isLimitLevel">
            <fortress-radio-group
                v-model="form.isLimitLevel"
                :dictList="YesNoList"
            >
            </fortress-radio-group>
          </el-form-item>
          <el-form-item label="会员级别" v-if="form.isLimitLevel==1" :label-width="formLabelWidth" prop="limitLevelIds">
            <fortress-select
                v-model="form.limitLevelIds"
                :dictList="limitLevelIdsList"
                placeholder="请选择会员级别"
                clearable
            ></fortress-select>
          </el-form-item>

          <el-form-item label="每人限领张数" :label-width="formLabelWidth" prop="getMax">
            <el-input-number
                v-model="form.getMax"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="购买价格" :label-width="formLabelWidth" prop="money">
            <el-input-number
                v-model="form.money"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="消耗积分" :label-width="formLabelWidth" prop="credit">
            <el-input-number
                v-model="form.credit"
            ></el-input-number>
          </el-form-item>

        </el-tab-pane>

        <el-tab-pane label="使用限制" name="useLimit">
          <el-form-item label="是否限制商品" :label-width="formLabelWidth" prop="limitGoodType">
            <fortress-radio-group
                v-model="form.limitGoodType"
                :dictList="CouponLimitType_ordersList"
            >
            </fortress-radio-group>
          </el-form-item>
          <el-form-item label="是否限制商品分类" :label-width="formLabelWidth" prop="limitGoodCateType">
            <fortress-radio-group
                v-model="form.limitGoodCateType"
                :dictList="CouponLimitType_ordersList"
            >
            </fortress-radio-group>
          </el-form-item>
          <el-form-item label="限制商品分类" v-if="form.limitGoodCateType!=1" :label-width="formLabelWidth"
                        prop="limitGoodCateIds">
            <el-input
                v-model="form.limitGoodCateIds"
                autocomplete="off"
                placeholder="请输入限制商品分类"
            ></el-input>
          </el-form-item>
          <el-form-item label="限制商品"  v-if="form.limitGoodType!=1" :label-width="formLabelWidth" prop="limitGoodIds">
            <el-input
                v-model="form.limitGoodIds"
                autocomplete="off"
                placeholder="请输入限制商品"
            ></el-input>
          </el-form-item>

          <el-form-item label="消费方式" :label-width="formLabelWidth" prop="useType">
            <fortress-radio-group
                v-model="form.useType"
                :dictList="CouponUseType_ordersList"
            >
            </fortress-radio-group>
          </el-form-item>
          <el-form-item label="退回方式" :label-width="formLabelWidth" prop="returnType">
            <fortress-radio-group
                v-model="form.returnType"
                :dictList="CouponReturnType_ordersList"
            >
            </fortress-radio-group>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="使用说明" name="useDesc">
          <el-form-item label="介绍" :label-width="formLabelWidth" prop="desc">
            <fortress-editor v-model="form.desc"></fortress-editor>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
      <el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {salecouponInfo, salecouponSave, salecouponEdit} from "@/api/orders/salecoupon.js";
import {enumList, urlList} from "@/api/public.api.js";
import * as ftVal from "@/common/fortressValidator.js";

export default {
  data() {
    return {
      activeName: "base",
      visible: false,
      form: {
        couponName: "",
        getType: "",
        getMax: "",
        getUrl: "",
        useType: "",
        returnType: "",
        enough: "",
        timeLimit: "",
        timeDays: "",
        timeStart: "",
        timeEnd: "",
        backType: "",
        deduct: "",
        discount: "",
        desc: "",
        total: "",
        money: "",
        credit: "",
        displayOrder: "",
        limitGoodType: "1",
        limitGoodCateType: "1",
        limitGoodCateIds: "",
        limitGoodIds: "",
        isLimitLevel: "",
        limitLevelIds: "",
        status: "",
      },
      formLabelWidth: "200px",
      rules: {
        couponName: [
          {required: true, message: "请输入优惠券名称", trigger: "blur"},
        ],
        getType: [
          {required: true, message: "请输入领取中心显示", trigger: "blur"},
        ],
        getMax: [
          {required: true, message: "请输入每人限领张数", trigger: "blur"},
          // {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        getUrl: [
          // {required: true, message: "请输入领取卡券链接", trigger: "blur"},
        ],
        useType: [
          {required: true, message: "请输入消费方式", trigger: "blur"},
        ],
        returnType: [
          {required: true, message: "请输入退回方式", trigger: "blur"},
        ],
        enough: [
          {required: true, message: "请输入消费满多少可用 0 不限制", trigger: "blur"},
          // {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        timeLimit: [
          // {required: true, message: "请输入使用时间限制", trigger: "blur"},
        ],
        timeDays: [
          {required: true, message: "请输入获得后可使用 0 不限时间 >0 天", trigger: "blur"},
          // {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        timeStart: [
          // {required: true, message: "请输入开始时间", trigger: "blur"},
        ],
        timeEnd: [
          // {required: true, message: "请输入结束时间", trigger: "blur"},
        ],
        backType: [
          {required: true, message: "请输入返利方式", trigger: "blur"},
        ],
        total: [
          {required: true, message: "请输入总发放数量", trigger: "blur"},
          // {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        money: [
          // {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        credit: [
          // {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        displayOrder: [
          {required: true, message: "请输入排序", trigger: "blur"},
          // {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        limitGoodType: [
          {required: true, message: "请输入是否限制商品", trigger: "blur"},
        ],
        limitGoodCateType: [
          {required: true, message: "请输入是否限制商品分类", trigger: "blur"},
        ],
        limitGoodCateIds: [
          // {required: true, message: "请输入限制商品分类", trigger: "blur"},
        ],
        limitGoodIds: [
          // {required: true, message: "请输入限制商品", trigger: "blur"},
        ],
        isLimitLevel: [
          {required: true, message: "请输入是否限制会员级别 ", trigger: "blur"},
        ],
        limitLevelIds: [
          // {required: true, message: "请输入会员级别", trigger: "blur"},
        ],
      },
      YesNoList: [],
      CouponUseType_ordersList: [],
      CouponReturnType_ordersList: [],
      CouponTimeLimitType_ordersList: [],
      CouponBackType_ordersList: [],
      CouponLimitType_ordersList: [],
      limitLevelIdsList: [],
    };
  },
  created() {
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    queryUrlList() {
      this.limitLevelIdsList = [];
      urlList("/member/memberLevel/list").then((resp) => {
        if (resp.code == 0) {
          if (resp.data) {
            resp.data.forEach((item) => {
              this.limitLevelIdsList.push({code: item.id, name: item.name});
            });
          }
        }
      });
    },
    queryEnumList() {
      this.YesNoList = [];
      enumList("YesNo", "").then((resp) => {
        if (resp.code == 0) {
          this.YesNoList = resp.data;
        }
      });
      this.CouponUseType_ordersList = [];
      enumList("CouponUseType", "orders").then((resp) => {
        if (resp.code == 0) {
          this.CouponUseType_ordersList = resp.data;
        }
      });
      this.CouponReturnType_ordersList = [];
      enumList("CouponReturnType", "orders").then((resp) => {
        if (resp.code == 0) {
          this.CouponReturnType_ordersList = resp.data;
        }
      });
      this.CouponTimeLimitType_ordersList = [];
      enumList("CouponTimeLimitType", "orders").then((resp) => {
        if (resp.code == 0) {
          this.CouponTimeLimitType_ordersList = resp.data;
        }
      });
      this.CouponBackType_ordersList = [];
      enumList("CouponBackType", "orders").then((resp) => {
        if (resp.code == 0) {
          this.CouponBackType_ordersList = resp.data;
        }
      });
      this.CouponLimitType_ordersList = [];
      enumList("CouponLimitType", "orders").then((resp) => {
        if (resp.code == 0) {
          this.CouponLimitType_ordersList = resp.data;
        }
      });
    },
    init(id) {
      this.resetForm();
      this.queryEnumList();
      this.queryUrlList();
      //修改
      if (id) {
        salecouponInfo(id).then((resp) => {
          if (resp.code == 0) {
            this.$nextTick(() => {
              this.form = {
                ...this.form,
                ...resp.data,
              };
            });
          } else {
            this.$msg({
              message: resp.msg,
              type: "error",
            });
          }
        });
      }
      this.visible = true;
    },
    //提交表单数据
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //修改
          if (this.form.id) {
            salecouponEdit(this.form).then((resp) => {
              if (resp.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$emit("refreshData");
                this.visible = false;
              } else {
                this.$msg({
                  message: resp.msg,
                  type: "error",
                });
              }
            });
            //新增
          } else {
            salecouponSave(this.form).then((resp) => {
              if (resp.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$emit("refreshData");
                this.visible = false;
              } else {
                this.$msg({
                  message: resp.msg,
                  type: "error",
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.form = {
        couponName: "",
        getType: "",
        getMax: "",
        getUrl: "",
        useType: "",
        returnType: "",
        enough: "",
        timeLimit: "",
        timeDays: "",
        timeStart: "",
        timeEnd: "",
        backType: "",
        deduct: "",
        discount: "",
        desc: "",
        total: "",
        money: "",
        credit: "",
        displayOrder: "",
        limitGoodType: "1",
        limitGoodCateType: "1",
        limitGoodCateIds: "",
        limitGoodIds: "",
        isLimitLevel: "",
        limitLevelIds: "",
        status: "",
      };
      this.$nextTick(() => {
        if (this.$refs["form"]) {
          this.$refs["form"].resetFields();
        }
      });
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  padding: 7px;
  overflow: hidden;
  overflow-y: auto;
  font-weight: normal;
}
</style>
